<template>
  <div class="addApi">
    <h1 class="title">请输入您的Token</h1>
    <div class="inputBox">
      <span class="input input--hoshi">
        <input
          @blur="closeLabel"
          v-model="value"
          class="input__field input__field--hoshi"
          type="text"
          id="input-4"
        />
        <label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
          <span class="input__label-content input__label-content--hoshi">{{ label }}</span>
        </label>
      </span>
    </div>
    <div class="button-login">
      <ParticleEffectButton
        :visible.sync="btnOps.visible"
        :animating.sync="btnOps.animating"
        :options="btnOps"
        cls="btn-cls"
      >确定</ParticleEffectButton>
    </div>
    <div style="display:flex;justify-content: center;">
      <h3 class="notToken" @click="notToken">我没有Token，我想使用作者的</h3>
    </div>
    
  </div>
</template>
<script>
import ParticleEffectButton from "vue-particle-effect-buttons";
export default {
  comments: {
    ParticleEffectButton
  },
  data() {
    return {
      btnOps: {
        type: "triangle",
        easing: "easeOutQuart",
        size: 6,
        particlesAmountCoefficient: 4,
        oscillationCoefficient: 2,
        color: function() {
          return Math.random() < 0.5 ? "#000000" : "#ffffff";
        },
        onComplete: () => {
          if (this.value == ""&&this.btnOps.visible==false) {
            this.$Message.warning("Token不能为空");
            this.btnOps.visible = true;
            return;
          }
          if (!this.btnOps.visible) { 
            this.testToken("Bearer " + this.value);
          }
          
        },
        onBegin: () => {},
        visible: true,
        animating: false
      },
      label: "输入您的Token(可选)",
      value: ""
    };
  },
  methods: {
    closeLabel() {
      if (this.value.replaceAll(" ", "") != "") {
        this.label = "";
      } else {
        this.label = "输入您的Token(可选)";
      }
    },
    testToken(d) {
      localStorage.setItem("Authorization", "Bearer " + this.value);
      this.$Message.loading({
        content: "正在验证Token是否可用",
        duration: 0
      });
      this.api.completions
        .testToken(d)
        .then(res => {
          this.$Message.destroy();
          this.$Message.success("Token验证成功,跳转至主页");
          this.$router.push("/");
        })
        .catch(err => {
          localStorage.clear()
          this.btnOps.visible = true;
          this.$Message.destroy();
          this.$Message.error("Token验证失败,请重试");
        });
    },
    notToken() {
      localStorage.clear()
      localStorage.setItem('notToken', true)
      this.$router.push('/')
    }
  },
  components: {
    ParticleEffectButton
  }
};
</script>

<style lang="less" scoped>
.button-login {
  display: flex;
}
.notToken {
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
}
::v-deep .vue-particle-effect-button {
  margin: auto;
  display: block;
  .particles-button {
    background: #515a6e;
    padding: 10rem 70rem;
  }
}
@import "../../public/css/set1.css";
.addApi {
  transition: all 0.4s;
}
@media (min-width: 1200px) {
  .title {
    text-align: center;
    margin-top: 20rem;
  }
  .inputBox {
    display: flex;
    justify-content: center;
    margin-top: 20rem;
  }
  .addApi {
    width: 600px;
    height: 600px;
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 10rem;
    box-shadow: 1rem 1rem 14rem 0rem;
  }
  .button-login {
    margin-top: 30rem;
  }
  .notToken {
    margin-top: 20rem;
    font-size: 8rem;
  }
}
@media (max-width: 1200px) and (min-width: 750px) {
  .title {
    text-align: center;
    margin-top: 20rem;
  }
  .inputBox {
    display: flex;
    justify-content: center;
    margin-top: 20rem;
  }
  .addApi {
    width: 400px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 10rem;
    box-shadow: 1rem 1rem 14rem 0rem;
  }
  .notToken {
    margin-top: 20rem;
    font-size: 8rem;
  }
}
@media (max-width: 750px) {
  .title {
    text-align: center;
    margin-top: 40rem;
  }
  .inputBox {
    display: flex;
    justify-content: center;
    margin-top: 20rem;
  }
  .addApi {
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.9);
    // position: absolute;
    overflow: hidden;
    margin: auto;
    margin-top: 200rem;
    border-radius: 10rem;
    box-shadow: 1rem 1rem 14rem 0rem;
  }
  .notToken {
    margin-top: 20rem;
    font-size: 20rem;
  }
}
</style>